<template>
  <div class="main-content">
    <h1 style="margin: 5px 0">合作机构业绩排名表</h1>
    <div class="screen-frame clearfix">
      <div class="row">
      <div class="col-lg-4">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-4 col-sm-2 control-label">楼盘名称：</label>
            <div class="col-md-7 col-sm-5">
              <el-select class="" v-model="params.premisesId" filterable placeholder="请选择" :clearable="true" style="width:100%">
                <el-option v-for="item in premisesList" :key="item.premisesId" :label="item.premisesName" :value="item.premisesId">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-4 col-sm-2 control-label">时间区间：</label>
            <div class="col-md-4 col-sm-5">
              <DatePicker type="date" placeholder="开始日期" v-model="params.beginDate" style="width: 120px"></DatePicker>
            </div>
            <div class="col-md-4 col-sm-5">
              <DatePicker type="date" placeholder="结束日期" v-model="params.endDate" style="width: 120px"></DatePicker>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-4 col-sm-2 control-label">分销公司：</label>
            <div class="col-md-7 col-sm-5">
              <input type="text" class="form-control" placeholder="分销公司名称" v-model="params.companyName">
            </div>
          </div>
        </div>
      </div>
      </div>
      <div class="row">
      <div class="col-lg-4" style="display: none">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-4 col-sm-2 control-label">有无带看：</label>
            <div class="col-md-7 col-sm-5">
              <select class="form-control" v-model="params.hasVisit">
                <option value="">不限</option>
                <option value="0">无带看</option>
                <option value="1">有带看</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-4 col-sm-2 control-label">有效数据：</label>
            <div class="row" style="text-align: left; line-height: 30px;">
              <div class="col-lg-7 col-md-2">
                <Checkbox v-model="showValidDataFlag">过滤无业绩统计</Checkbox>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="form-group">
          <label class="col-md-4 col-sm-2 control-label"></label>
          <div class="col-md-7 col-sm-5">
            <button type="button" class="btn btn-theme" v-on:click="list(1)">查询</button>
            <button type="button" class="btn btn-theme" v-if="exportBtnShow" v-on:click="exportInfo" v-res="{code:'menu_0007_0003_0001'}">导出</button>
            <button type="button" class="btn btn-theme" v-if="!exportBtnShow" style="background-color: #999;" v-on:click="exportRepeatMsg" v-res="{code:'menu_0007_0003_0001'}">导出{{ timeOut }}</button>
          </div>
        </div>
      </div>
      </div>
    </div>
    <div class="row" style="text-align: center;color: #f87242;" v-show="!show">
      没有查询到相应的数据
    </div>
    <div class="table table-striped table-bordered" v-show="show">

      <div class="table-responsive">
        <table class="table table-striped table-bordered min-width-790">
          <thead>
            <tr>
              <th width="4%">排名</th>
              <th width="10%">合作机构名</th>
              <th width="7%">当前经纪人</th>
              <th width="6%">报备客户</th>
              <th width="8%">报备成功客户</th>
              <th width="6%">首访客户</th>
              <th width="6%">复访客户</th>
              <th width="6%">认筹客户</th>
              <th width="6%">认购客户</th>
              <th width="6%">签约客户</th>
              <th width="6%">签约率</th>
              <th width="6%">签约业绩</th>
              <th width="6%">渠道经理</th>
              <th width="8%">查看</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row,index) in effectList">
              <td>{{index + 1}}</td>
              <td><a class="a-report" @click="gotoStoreReport(row.id)">{{row.companyName}}</a> </td>
              <td>{{row.countEight}}</td>
              <td>{{row.countOne}}</td>
              <td>{{row.countTwo}}</td>
              <td>{{row.countThree}}</td>
              <td>{{row.countNine}}</td>
              <td>{{row.countFour}}</td>
              <td>{{row.countFive}}</td>
              <td>{{row.countSix}}</td>
              <td>{{utils.calculateSignRate(row.countTwo,row.countSix)}}</td>
              <td>{{row.dealAmount}}</td>
              <td>{{row.principalName}}</td>
              <td><a class="a-report" @click="gotoAgentReport(row.id)">查看经纪人业绩</a> </td>
            </tr>
            <tr class="result-total">
              <td colspan="2">合计</td>
              <td>{{resultTotal.countEight}}</td>
              <td>{{resultTotal.countOne}}</td>
              <td>{{resultTotal.countTwo}}</td>
              <td>{{resultTotal.countThree}}</td>
              <td>{{resultTotal.countNine}}</td>
              <td>{{resultTotal.countFour}}</td>
              <td>{{resultTotal.countFive}}</td>
              <td>{{resultTotal.countSix}}</td>
              <td></td>
              <td>{{resultTotal.dealAmount}}</td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div id="laypage_effect_report"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        premisesId: "",
        endDate: "",
        companyName: "",
        hasVisit: "",
        saleStatus: "0,1,2,3",
        validateData: true,
      },
      effectList: [],
      premisesList: [],
      premisesStatusEnum: [
        { saleStatus: 0, saleStatusName: "待售", saleStatusFlag: false },
        { saleStatus: 1, saleStatusName: "在售", saleStatusFlag: true },
        { saleStatus: 2, saleStatusName: "售罄", saleStatusFlag: false },
        { saleStatus: 3, saleStatusName: "下架", saleStatusFlag: false },
      ],
      showValidDataFlag: true,
      show: true,
      resultTotal: {
        countEight: 0,
        countSeven: 0,
        countOne: 0,
        countTwo: 0,
        countThree: 0,
        countFour: 0,
        countFive: 0,
        countSix: 0,
        countNine: 0,
        dealAmount: 0,
      },
      exportBtnShow: true,
      timeOut: 10,
    };
  },
  mounted: function() {
    var _self = this;
    //加载时间与楼盘
    if (!_self.$route.params.beginDate && !_self.$route.params.endDate) {
      _self.params.beginDate = _self.utils.getCurrentMonthFirst();
      _self.params.endDate = _self.utils.getCurrentMonthLast();
    } else {
      _self.params.beginDate = _self.$route.params.beginDate;
      _self.params.endDate = _self.$route.params.endDate;
    }

    _self.findPremisesLists();
  },
  methods: {
    list: function(pageNo) {
      var loadIndex = layer.load();
      if (pageNo) {
        this.params.pageNo = 1;
      }
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getEffectPage";
      var body = {};
      body.params = _self.params;
      body.params.beginDate = this.utils.dateFormat(
        body.params.beginDate,
        "yyyy-MM-dd"
      );
      body.params.endDate = this.utils.dateFormat(
        body.params.endDate,
        "yyyy-MM-dd"
      );

      let intervalDays = this.utils.intervalTime(body.params.beginDate, body.params.endDate);
      if(intervalDays > 31){
        layer.close(loadIndex);
        layer.msg("单次最多获取31天的数据!");
        return false;
      }
      body.params.validateData = _self.showValidDataFlag;
      _self.$http.post(url, body).then((response) => {
        layer.close(loadIndex);
        var body = response.body.resData;
        if (body.result == 0) {
          layer.msg("接口异常!");
        } else {
          _self.effectList = body.pageModel.rows;
          //统计数据
          _self.setResultTotal();
          var totalPages = body.pageModel.totalPages;
          var current = body.pageModel.pageNumber;
          var total = body.pageModel.total;
          _self.show = total > 0 ? true : false;
          // if(totalPages > 0) {
          layui.laypage.render({
            elem: $("#laypage_effect_report"), //容器。值支持id名、原生dom对象，jquery对象,
            limit: _self.params.pageSize,
            curr: current,
            count: total,
            theme: "#f87242;", //皮肤
            first: "首页", //若不显示，设置false即可
            last: "尾页", //若不显示，设置false即可
            prev: "上一页", //若不显示，设置false即可
            next: "下一页", //若不显示，设置false即可
            limits: [10, 20, 50, 100, 200],
            layout: ["prev", "page", "next", "skip", "count", "limit"],
            jump: function(obj, first) {
              if (!first) {
                _self.params.pageNo = obj.curr;
                _self.params.pageSize = obj.limit;
                _self.list();
              }
            },
          });
          // }
        }
      });
    },
    findPremisesLists: function() {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getCaseMemberList";
      var body = {};
      body.params = {
        userId: window.localStorage.getItem("userId"),
      };
      _self.$http.post(url, body).then((response) => {
        _self.premisesList = response.body.resData.caseMemberList;
        if (_self.$route.params.premisesId) {
          _self.params.premisesId = _self.$route.params.premisesId.toString();
          this.$forceUpdate();
        }
        _self.list();
      });
    },
    gotoAgentReport: function(agentCompany, deptId) {
      var _self = this;
      let params = {
        beginDate: _self.params.beginDate,
        endDate: _self.params.endDate,
        premisesId: _self.params.premisesId,
        agentCompany: agentCompany,
        deptId: deptId,
      };
      _self.$router.push({
        name: "channelCooOrgAgentReport",
        params: params,
      });
    },
    gotoStoreReport: function(agentCompany) {
      var _self = this;
      this.$router.push({
        name: "channelCooOrgReport",
        params: {
          beginDate: this.params.beginDate,
          endDate: this.params.endDate,
          premisesId: _self.params.premisesId,
          agentCompany: agentCompany,
        },
      });
    },
    exportInfo: function() {
      var loadIndex = layer.load();
      var _self = this;

      if (!_self.effectList || _self.effectList.length == 0) {
        layer.msg("排名表中无可导出数据!");
        return false;
      }
      var userId = window.localStorage.getItem("1_userId");
      var beginDate = this.utils.dateFormat(
        _self.params.beginDate,
        "yyyy-MM-dd"
      );
      var endDate = this.utils.dateFormat(_self.params.endDate, "yyyy-MM-dd");

      let intervalDays = this.utils.intervalTime(beginDate, endDate);
      if(intervalDays > 31){
        layer.close(loadIndex);
        layer.msg("单次最多获取31天的数据!");
        return false;
      }
      
      var premisesId = "";
      if (_self.params.premisesId) {
        premisesId = _self.params.premisesId;
      }
      let validateData = _self.params.validateData;
      _self.exportBtnShow = false;
      var url =
        this.utilHelper.apiUrl +
        "/api/getEffectExport?params.userId=" +
        userId +
        "&params.beginDate=" +
        beginDate +
        "&params.endDate=" +
        endDate +
        "&params.premisesId=" +
        premisesId +
        "&params.validateData=" +
        validateData +
        "&params.pageNo=1&params.loginType=1&params.pageSize=9999999" +
        "&params.companyName=" +
        encodeURI(encodeURI(_self.params.companyName));
      location.href = url;

      var exportInterval = setInterval(function() {
        if (_self.timeOut <= 0) {
          window.clearInterval(exportInterval);
          _self.timeOut = 10;
          _self.exportBtnShow = true;
        } else {
          _self.timeOut -= 1;
        }
      }, 1000);
      layer.close(loadIndex);
    },
    exportRepeatMsg: function() {
      var _self = this;
      layer.msg(_self.timeOut + "秒后可再次导出,请稍等片刻!");
      return;
    },
    setResultTotal() {
      var _self = this;
      _self.resultTotal = {
        countEight: 0,
        countSeven: 0,
        countOne: 0,
        countTwo: 0,
        countThree: 0,
        countFour: 0,
        countFive: 0,
        countSix: 0,
        countNine: 0,
        dealAmount: 0,
      };
      for (var i in _self.effectList) {
        _self.resultTotal.countOne =
          Number(_self.resultTotal.countOne) +
          Number(_self.effectList[i].countOne);
        _self.resultTotal.countTwo =
          Number(_self.resultTotal.countTwo) +
          Number(_self.effectList[i].countTwo);
        _self.resultTotal.countThree =
          Number(_self.resultTotal.countThree) +
          Number(_self.effectList[i].countThree);
        _self.resultTotal.countFour =
          Number(_self.resultTotal.countFour) +
          Number(_self.effectList[i].countFour);
        _self.resultTotal.countFive =
          Number(_self.resultTotal.countFive) +
          Number(_self.effectList[i].countFive);
        _self.resultTotal.countSix =
          Number(_self.resultTotal.countSix) +
          Number(_self.effectList[i].countSix);
        _self.resultTotal.countSeven =
          Number(_self.resultTotal.countSeven) +
          Number(_self.effectList[i].countSeven);
        _self.resultTotal.countEight =
          Number(_self.resultTotal.countEight) +
          Number(_self.effectList[i].countEight);
          _self.resultTotal.countNine =
          Number(_self.resultTotal.countNine) +
          Number(_self.effectList[i].countNine);
        _self.resultTotal.dealAmount =
          Number(_self.resultTotal.dealAmount) +
          Number(_self.effectList[i].dealAmount);
      }
    },
  },
};
</script>
<style>
/* 全局样式 */
.table-striped > tbody > tr.result-total {
  background: #efefef;
  font-weight: bold;
}
</style>